import React, {useEffect, useState} from 'react';
import {getHospitalList, getUpdateStatus} from "@/api/hosp";
import {Button, Form, Input, message, Space,Select, Switch, Table} from "antd";
import {useNavigate} from "react-router-dom";
import {changeParams, deleteBatchMoveAsync, getHospitalSetAsync} from "@/store/slice/hosp";
import {SearchOutlined} from "@ant-design/icons";
import {getFindByParentId} from "@/api/dict";
const {Option} = Select;
function HospitalList() {

    const navigate = useNavigate();
    const [hospitalList,setHospitalList] = useState([]);
    const [pageInfo,setPageInfo] = useState({
        // current:(localStorage.current?(localStorage.current)/1:1),
        current:localStorage.getItem("current")?parseInt(localStorage.getItem("current") as string):1,
        pageSize:4,
        total:10
    })
    const [loading,setLoading] = useState(false);
    const getHospitalListAsync = async function(current:number,pageSize:number){
        setLoading(true);
        console.log(form.getFieldsValue())
        const result = await  getHospitalList(current,pageSize,form.getFieldsValue());
        localStorage.setItem("current",result.data.number+1);
        setPageInfo({
            pageSize:result.data.size,
            current:result.data.number+1,
            total:result.data.totalElements
        })
        setHospitalList(result.data.content);
        setLoading(false);
    }

    // 定义医院类型列表
    const [hostypeList,setHostypeList] = useState([]);
    // 定义省份列表
    const [provinceCodeList,setProvinceCodeList] = useState([])
    // 定义城市列表
    const [cityCodeList,setCityCodeList] = useState([])
    // 定义区列表
    const [districtCodeList,setDistrictCodeList] = useState([]);

    useEffect(()=>{
        // 调用医院列表
        getHospitalListAsync(pageInfo.current,pageInfo.pageSize);

        // 找到医院类型
        getFindByParentId(10000).then(value=>{
            // console.log(value);
            setHostypeList(value.data);
        })
        // 找到省份列表
        getFindByParentId(86).then(value=>{
            // console.log(value)
            setProvinceCodeList(value.data);
        })
    },[])
    const [form] = Form.useForm();
    return (
        <div>
            <Space style={{marginBottom: 16}}>
                <Form
                    form={form}
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={(values:any)=>{
                        console.log(values);
                        getHospitalListAsync(1,pageInfo.pageSize)
                    }}
                    autoComplete="off"
                    layout={"inline"}
                >
                    <Form.Item name={"provinceCode"}>
                        <Select onChange={async (value)=>{
                            const result = await getFindByParentId(value);
                            form.setFieldsValue({
                                cityCode:undefined,
                                districtCode:undefined
                            })
                            setCityCodeList(result.data);
                            setDistrictCodeList([])
                        }} placeholder={"请选择省份"}>
                            {
                                provinceCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"cityCode"}>
                        <Select onChange={async value=>{
                            const result = await getFindByParentId(value);
                            form.setFieldsValue({
                                districtCode:undefined
                            })
                            setDistrictCodeList(result.data);
                        }} placeholder={"请选择城市"}>
                            {
                                cityCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item name={"districtCode"}>
                        <Select placeholder={"请选择区"}>
                            {
                                districtCodeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>


                    <Form.Item name={"hostype"}>
                        <Select placeholder={"请选择医院类型"}>
                            {
                                hostypeList.map((item:any)=>(
                                    <Option key={item.id} value={item.value}>{item.name}</Option>
                                ))
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="hosname"
                    >
                        <Input placeholder={"请输入医院名称"} />
                    </Form.Item>
                    <Form.Item
                        name="hoscode"
                    >
                        <Input placeholder={"请输入医院编码"} />
                    </Form.Item>

                    <Form.Item>
                        <Button icon={<SearchOutlined />} type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                    <Form.Item>
                        <Button onClick={()=>{
                            form.resetFields();// 重置表单
                            getHospitalListAsync(1,pageInfo.pageSize);
                        }} htmlType="button">
                            重置
                        </Button>
                    </Form.Item>
                </Form>

            </Space>
            <Table
                loading={loading}
                bordered={true}
                rowKey={"id"}
                pagination={{
                    ...pageInfo,
                    // onChange(current,pageSize){
                    //     getHospitalListAsync(current,pageSize);
                    // }

                    onChange:getHospitalListAsync
                }}
                columns={[
                    {
                        title:"序号",
                        align:"center",
                        render(value,rows,index){
                            return index+1;
                        }
                    },{
                        title:"医院名称",
                        align:"center",
                        dataIndex:"hosname"
                    },{
                        title:"医院编码",
                        align:"center",
                        dataIndex:"hoscode"
                    },{
                        title:"医院LOGO",
                        align:"center",
                        dataIndex:"logoData",
                        render(logoData){
                            return (
                                <img width={50} src={"data:image/png;base64,"+logoData} alt=""/>
                            )
                        }
                    },{
                        title:"是否上线",
                        align:"center",
                        // dataIndex:"status",
                        // 0：未上线 1：已上线
                        render(rows){
                            return (
                                <Switch onChange={async ()=>{
                                    await getUpdateStatus(rows.id,rows.status===1?0:1);
                                    await getHospitalListAsync(pageInfo.current,pageInfo.pageSize);
                                }} checked={rows.status===1}></Switch>
                            )
                        }
                    },{
                        title:"医院等级",
                        align:"center",
                        dataIndex:"param",
                        render({hostypeString}){
                            return hostypeString;
                        }
                    },{
                        title:"医院地址",
                        align:"center",
                        dataIndex:"param",
                        render({fullAddress}){
                            return fullAddress;
                        }
                    },{
                        title:"创建时间",
                        align:"center",
                        dataIndex:"createTime"
                    },{
                        title:"操作",
                        align:"center",
                        dataIndex:"id",
                        fixed:"right",
                        render(id){
                            return (
                                <Space>
                                    <Button onClick={()=>{
                                        navigate("/hospital/show/"+id)
                                    }} type={"primary"}>查看</Button>
                                    <Button  type={"primary"}>排班</Button>
                                </Space>
                            )
                        }
                    }
                ]}
                scroll={{
                    x:1500
                }}
                dataSource={hospitalList}
            ></Table>
        </div>
    );
}

export default HospitalList;